<template>
  <div class="wrap">
    <van-nav-bar title="生活缴费"
                 left-text=""
                 right-text="缴费记录"
                 left-arrow
                 @click-left="onClickLeft"
                 @click-right="onClickRight" />
    <!-- 通知栏 -->
    <van-notice-bar left-icon="volume-o"
                    color="#FFA07A"
                    text="请各位业主尽早缴付水电费、物业费，未按时缴款的房户将会被自动断水断电，请知悉！" />
    <div class="cart">
      <template>
        <el-table ref="multipleTable"
                  :data="tableData"
                  :row-style="showUnpay"
                  style="width: 100%"
                  tooltip-effect="dark"
                  border
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection"
                           width="42"
                           style="margin-left:-5px">
          </el-table-column>
          <el-table-column prop="name"
                           label="项目"
                           width="100"
                           style="color:pink">
          </el-table-column>
          <el-table-column prop="unitprice"
                           label="定价"
                           width="99">
          </el-table-column>
          <el-table-column prop="use"
                           label="用量"
                           width="50">
          </el-table-column>
          <el-table-column prop="cost"
                           label="总计"
                           width="70">
          </el-table-column>
          <el-table-column label="截止日期"
                           width="95">
            <template slot-scope="scope"
                      show-overflow-tooltip>{{ scope.row.date }}</template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <van-submit-bar :price="costAll"
                    button-text="提交订单"
                    bind:submit="onSubmit"
                    button-color="#72CACD"
                    v-b-modal.modal-prevent-closing />
    <div>
      <b-modal id="modal-prevent-closing"
               ref="modal"
               title="扫码支付"
               @show="resetModal"
               @hidden="resetModal"
               @ok="handleOk">
        <form ref="form"
              @submit.stop.prevent="handleSubmit">
          <b-form-group :state="nameState"
                        label-for="name-input"
                        invalid-feedback="Name is required">
            <b-img :src="require('@/assets/images/PropertyPageImages/lilyQRCode.jpg')"
                   fluid
                   alt="Fluid image"
                   class="img-qrcode"></b-img>
            <span>应付：￥{{getTotal}}</span>
            <b-form-input id="name-input"
                          v-model="addr"
                          :state="nameState"
                          placeholder="住址"
                          required></b-form-input>
          </b-form-group>
        </form>
      </b-modal>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LifePay',
  data () {
    return {
      tableData: this.$store.state.tableData,
      costAll: 0,
      selected: [],
      multipleSelection: [],
      // 弹窗
      addr: '',
      QRCodeUrl: '',
      nameState: null
      // submittedNames: []
    }
  },
  components: {
  },
  watch: {
  },
  computed: {
    getTotal () {
      return (this.costAll * 0.01).toFixed(2)
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$router.push('PayHistory')
    },
    // 只显示未支付的项目
    showUnpay ({ row, rowIndex }) {
      if (this.tableData[rowIndex].status === 'true') {
        return { display: 'none' }
      } else {
        return {}
      }
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      let price = 0
      for (var i = 0; i < val.length; i++) {
        price += parseFloat(val[i].cost)
      }
      // 因为组件是以分为单位
      this.costAll = parseFloat(price * 100)
    },
    resetModal () {
      this.addr = ''
      this.nameState = null
    },
    handleOk (bvModalEvt) {
      // Prevent modal from closing
      bvModalEvt.preventDefault()
      // Trigger submit handler
      this.handleSubmit()
    },
    handleSubmit () {
      // Exit when the form isn't valid
      if (!this.checkFormValidity()) {
        return
      }
      // 更新paylist的付款状态status
      const i = []
      for (let j = 0; j < this.multipleSelection.length; j++) {
        i.push(this.multipleSelection[j].id)
      }
      const obj = { i: i, addr: this.addr }
      // 更新store的 paylist的订单状态
      this.$store.commit('updateIntoPayList', obj)
      // 清空全选
      this.$refs.multipleTable.clearSelection()
      // Hide the modal manually
      this.$nextTick(() => {
        this.$bvModal.hide('modal-prevent-closing')
      })
      // document.querySelector('.el-checkbox').classList.remove('is-checked')
      // document.querySelector('.el-checkbox__input').classList.remove('is-checked')
    },
    onRowSelected (items) {
      this.selected = items
    },
    checkFormValidity () {
      const valid = this.$refs.form.checkValidity()
      this.nameState = valid
      return valid
    }
  }
}
</script>

<style scoped>
.cart {
  margin-top: 2%;
}
.wrap {
  height: 100vh;
}

.img-qrcode {
  display: block;
  width: 100%;
  height: 100%;
}
/* 表头样式 */
::v-deep thead .cell {
  color: #778899;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-nav-bar .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-nav-bar .van-ellipsis {
  color: #fff;
}

::v-deep .btn {
  background: rgb(114, 202, 205) !important;
  border: none;
}
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
</style>
